<template>
  <div class="search">
        <!-- 标题 -->
    <div class="header">
      <div class="icon" @click="goBack">
        <span class="iconfont icon-arrow-left"></span>
      </div>
      <div class="title">搜索</div>
    </div>
    <!-- 搜索框 -->
     <div class="searchTop">
        <input type="text" class="keywork"
         v-model="keywork" @change="onSearch"
          placeholder="请输入搜索的内容">
        <input type="button" value="搜索" class="btn" @click="onSearch">
      </div>
      <!-- 历史记录 -->
      <div class="history"  v-show="hisArr.length">
        <div class="top">
          <div class="title">
            历史记录
          </div>
          <div class="icon" @click="onDel">
            <span class="iconfont icon-ashbin"></span>
          </div>
        </div>
         <!-- 列表部分 -->
      <div class="list">
        <div class="item" @click="clickItemHis(item)" v-for="item in hisArr" :key="item" >{{item}}</div>
      </div>
      </div>
      <!-- 列表内容 -->
      <div class="searchMain" v-show="listArr.length">
        <div class="row" @click="goDetail(item.id,item.classid)" v-for="item in listArr" :key="item.id">
           {{item.title}}
        </div>
      </div>
      <div class="noData"  v-show="!listArr.length">
        <div>
          <span class="iconfont icon-warning"></span>
        </div>
        <div>暂无内容</div>
      </div>
  </div>
</template>
<script>
import { searchFun } from '@/network/innerAxios'
export default {
  data () {
    return {
      keywork: '',
      listArr: [],
      hisArr: []
    }
  },
  methods: {
    goDetail (id, cid) {
      this.$router.push(`/detail?cid=${cid}&id=${id}`)
    },
    // 点击每一个历史记录关键字
    clickItemHis (val) {
      console.log(val)
      this.keywork = val
      this.onSearch()
    },
    // ondel(){
    //   window.localStorage.removeItem("key")
    //   window.localStorage.clear()
    // },
    // 清空缓存（清空的是搜索记录）
    onDel () {
      window.localStorage.removeItem('localhisArr')
      this.hisArr = []
    },
    // 点击搜索；
    onSearch () {
      this.hisArr.unshift(this.keywork)
      // 去重功能
      this.hisArr = [...new Set(this.hisArr)]

      // var obj={name:"王五",age:18}
      // obj= JSON.stringify(obj)
      // window.localStorage.setItem("user",obj)
      // 缓存
      const localArr = JSON.stringify(this.hisArr)
      window.localStorage.setItem('localhisArr', localArr)
      searchFun(this.keywork).then(res => {
        console.log(res)
        this.listArr = res.data
      })
    },
    goBack () {
      this.$router.back()
    }
  },
  mounted () {
    let localhisArr = window.localStorage.getItem('localhisArr')
    localhisArr = JSON.parse(localhisArr)
    console.log(localhisArr)
    if (!localhisArr) {
      this.hisArr = []
      return
    }
    this.hisArr = localhisArr

    // console.log(this.$route.params)
    // var arr1 = [1, 2, 3, 2, 1, 4, 1, 2, 3, 3]
    // var arr2 = ['a', 'b', 'c']
    // var arr=arr1.concat(arr2)
    // var arr=[...arr1,...arr2]
    // console.log(arr)
    // var arr = [...new Set(arr1)]
    // console.log(arr)

    // 获取缓存
    // var user =window.localStorage.getItem("user");
    // user= JSON.parse(user)
    // console.log(user)
  }
}
</script>
<style lang="less" scoped>
.header{
    height:1rem;
    background-color:#31c27c;
    color:white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;padding-right: 0.4 rem;
    .icon{
      flex: 1;
      .iconfont{
        font-size:0.7rem;
        display:block;
      }
    }
    .title{
      flex:5;
      font-size:0.4rem;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      padding: 0 0.8rem 0 0.4rem;
      box-sizing: border-box;
    }
}
  .searchTop{
    border-top: 1px solid rgba(0,0,0,0.2);
    height:0.9rem;
    background-color:#31c27c;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.2rem;
    input{
      outline:none
    }
    .keywork{
      width:80%;
      height:0.6rem;border:none;
      border-radius:0.05rem;
      font-size:0.36rem;
      color:#555;
      padding: 0 0.1rem;
    }
    .btn{
      width:18%;
      color:#333;
      border-radius:0.04;
      height:0.6rem;
      font-size:0.36rem;
    }
  }
  .history{
    padding:0.2rem;
    .top{
      display:flex;
      justify-content: space-between;
      align-items: center;
      .title{
        font-size:0.36rem;
      }
      .icon{
        .iconfont{
          font-size:0.5rem;
          display:block;
        }
      }
    }
    .list{
      display:flex;
      padding:0.2rem 0;
      flex-wrap: wrap;
      .item{
        background-color:#efefef;
        color:333;
        padding:0.1rem 0.3rem;
        font-size:0.28rem;
        border-radius:0.2rem;
        margin-right:0.2rem;
        margin-bottom:0.15rem;
      }
    }

  }
  .searchMain{
      width:7.1rem;
      padding:0.25rem;
      margin: 0 auto;
      background-color:#fafafa;
      border-radius:0.3rem;
      .row{
        font-size:0.33rem;
        color:#333;
        line-height:2em;
        padding-left:0.2rem;
        position:relative;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        &::after{
          content: "";
          position:absolute;
          width:0.08rem;
          height:0.08rem;
          background-color:#31c27c;
          border-radius:50%;
          left:0;
          top:calc(50% - 0.04rem);
          box-shadow:0 0 0.1rem rgba(49,194,124,0.5);
        }
      }
    }
    .noData{
      width:7.1rem;text-align:center;
      font-size: 0.4rem;
      margin:0 auto;
      padding:2rem 0.2rem;
      color:#888;
      background-color:#fafafa;
      .iconfont{
        font-size:2rem;
        padding-bottom:0.4rem;
      }
    }
</style>
